<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { Config } from "./index";
const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    /**元素挂载位置 */
    teleport?: string;
    /**关闭前执行 */
    beforeClose?: (action: string) => boolean | Promise<boolean>;
    /**过渡标签name名 */
    transition?: string;
    zIndex?: number | string | undefined;
    useDefaultBtn?: boolean;
    /**是否允许点击遮罩关闭 */
    overlayclose?: boolean;
    /**是否展示遮罩层 */
    showOverlay?: boolean;
  }>(),
  {
    showOverlay: true,
    overlayclose: true,
    /**元素挂载位置 */
    teleport: "body",
    /**过渡标签name名 */
    transition: undefined,
  }
);
const config = ref<Config>(initConfig());
defineExpose({ config, open, close });
const emit = defineEmits([
  "ok-btn",
  "no-btn",
  "open",
  "close",
  "opened",
  "closed",
]);
/**打开弹窗 */
function open(cfg?: Partial<Config>) {
  config.value = { ...initConfig(), ...cfg };
  config.value.show = true;
}

function initConfig(): Config {
  return {
    show: false,
    /**显示关闭按钮 */
    showClose: true,
    /**禁用确定按钮 */
    disabledOkBtn: false,
    /**禁用取消按钮 */
    disabledNoBtn: false,
    /**显示返回按钮 */
    showBack: false,
    /**显示取消按钮 */
    showNoBtn: true,
    /**显示确定按钮 */
    showOkBtn: true,
    /**取消按钮文本 */
    noBtnText: t("qu-xiao"),
    /**确定按钮文本 */
    okBtnText: t("que-ding"),

    /**标题 */
    title: "hello",
    /**宽度 */
    width: undefined,

    /**是否在页面退回时自动关闭 */
    backClose: false,
    zIndex: undefined,
    noBtnProps: undefined,
    okBtnProps: undefined,
  };
}
/**关闭弹窗 */
function close() {
  config.value.show = false;
}

const slot = useSlots();
</script>

<template>
  <van-dialog
    class="Rdialog"
    v-model:show="config.show"
    :title="config.title"
    :cancel-button-text="config.noBtnText"
    :show-cancel-button="config.showNoBtn"
    :teleport="props.teleport"
    :transition="props.transition"
    :width="config.width"
    :overlay="props.showOverlay"
    :close-on-click-overlay="props.overlayclose"
    :before-close="beforeClose"
    :confirm-button-disabled="config.disabledOkBtn"
    :cancel-button-disabled="config.disabledNoBtn"
    :z-index="props.zIndex"
    :close-on-popstate="config.backClose"
    @confirm="emit('ok-btn')"
    @cancel="emit('no-btn')"
    @open="emit('open')"
    @opened="emit('opened')"
    @close="emit('close')"
    @closed="emit('closed')"
  >
    <template #title>
      <!-- 顶部插槽 -->
      <slot name="header">
        <div class="Rdialog_header">
          <van-icon
            @click="$router.back()"
            v-show="config.showBack"
            class="Rdialog_back active"
            name="revoke"
          />
          <slot name="title">
            <h3>{{ config.title || "hello" }}</h3>
          </slot>
          <van-icon
            v-show="config.showClose"
            @click="close"
            class="Rdialog_close active"
            name="close"
          />
        </div>
      </slot>
    </template>
    <div class="Rdialog_content">
      <slot></slot>
    </div>
    <!-- 页脚 -->
    <template v-if="!props.useDefaultBtn" #footer>
      <van-divider class="MT-sm MB-sm" />
      <slot name="button">
        <slot name="button_top"></slot>
        <div class="Rdialog_button_btn">
          <Rbutton
            v-if="config.showNoBtn"
            @click="emit('no-btn')"
            v-bind="config.noBtnProps"
          >
            {{ config.noBtnText }}
          </Rbutton>
          <Rbutton
            v-if="config.showOkBtn"
            @click="emit('ok-btn')"
            bg="var(--C-success)"
            v-bind="config.okBtnProps"
          >
            {{ config.okBtnText }}
          </Rbutton>
        </div>
        <!-- 页脚的底部 -->
        <div v-if="slot.button_bottom" style="margin-top: var(--gap-sm)">
          <slot name="button_bottom"></slot>
        </div>
      </slot>
    </template>
  </van-dialog>
</template>

<style lang="scss">
.Rdialog {
  padding: var(--gap-md);
  .van-dialog__header {
    padding-top: 0;
  }
  .Rdialog_header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .Rdialog_back {
    position: absolute;
    font-size: 40rem;
  }
  .Rdialog_close {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 40rem;
  }

  .Rdialog_content {
    margin-top: var(--gap-md);
  }
  .Rdialog_button_btn {
    display: flex;
    justify-content: space-around;
    & > * + * {
      margin-left: var(--gap-md);
    }
  }
  .van-button {
    flex: 1;
  }
}
</style>
